<template>
  <view class="index">
    <input placeholder="abc" />
    <picker :range="['USA', 'China', 'Brasil', 'Japan']" />
    <scroll-view></scroll-view>
    <view>
      <img src="" alt="" />
    </view>
    {{ msg }}
    <view class="btn">
      <nut-button type="primary" @click="handleClick('text', msg2, true)">
        点我
      </nut-button>
    </view>
    <nut-toast :msg="msg" v-model:visible="show" :type="type" :cover="cover" />
  </view>
</template>

<script>
import Taro from '@tarojs/taro'
import { onMounted, reactive, toRefs } from 'vue'
export default {
  name: 'Index',
  components: {},
  setup() {
    const state = reactive({
      msg: '欢迎使用 NutUI3.0 开发小程序',
      msg2: '你成功了～',
      type: 'text',
      show: false,
      cover: false,
    })
    onMounted(() => {
      console.log(Taro)
      console.log(Taro.getCurrentPages())
    })

    const handleClick = (type, msg, cover = false) => {
      state.show = true
      state.msg2 = msg
      state.type = type
      state.cover = cover
    }

    return {
      ...toRefs(state),
      handleClick,
    }
  },
}
</script>

<style lang="scss">
.index {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}
</style>
